<template>
  <div>
    <!-- <div class="head">
      <div @click="goback" style="cursor: pointer">
        <el-image
          style="height: 60px; width: 60px; border-radius: 20px"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.weite.com%2Ficon%2F8a%2Ff5%2Feb%2F8af5ebc6bcc120376d11dd6920478be1.jpg&refer=http%3A%2F%2Fimg.weite.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642093695&t=044a1321a8b81c401ac6e888708fcbfe"
        ></el-image>
      </div>
      <div style="font-size: 40px; font-family: 华文行楷; color: #eb5a17ec">
        用户注册
      </div>
    </div> -->
    <el-card class="formbox">
      <el-form
          ref="registerForm"
          :model="registerForm"
          :rules="rules"
          label-width="80px"
          class="registerForm"
      >
        <h3 class="register-title">欢迎注册</h3>
        <el-form-item label="用户名" prop="username">
          <el-input
              type="text"
              v-model="registerForm.username"
              autocomplete="off"
              placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="UNickName">
          <el-input
              type="text"
              v-model="registerForm.UNickName"
              autocomplete="off"
              placeholder="请输入用户昵称"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="UPhoneNum">
          <el-input
              type="text"
              v-model="registerForm.UPhoneNum"
              autocomplete="off"
              placeholder="请输入联系方式"
          ></el-input>
        </el-form-item>
        <el-form-item label="收获地址" prop="UAddress">
          <el-input
              type="text"
              v-model="registerForm.UAddress"
              autocomplete="off"
              placeholder="请输入收货地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input
              type="password"
              v-model="registerForm.password"
              autocomplete="off"
              placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkpass">
          <el-input
              type="password"
              v-model="registerForm.checkpass"
              autocomplete="off"
              placeholder="请再次输入密码"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="resetForm('registerForm')">重 置</el-button>
          <el-button
              type="primary"
              v-on:click="submitForm('registerForm')"
              style="width: 120px"
          >注 册</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.registerForm.checkPass !== "") {
          this.$refs.registerForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.registerForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      registerForm: {
        UNickName: "",
        password: "",
        UAddress: "",
        UPhoneNum: "",
        username: "",
        checkpass: "",
        userFace:
            "https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/bangumi/image/3dc7504373133137eaa15f8457196bc639b35798.png@87w_88h_1c_100q.webp",
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "change" },
        ],
        UNickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" },
        ],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
        UAddress: [
          { required: true, message: "收货地址不能为空", trigger: "blur" },
        ],
        UPhoneNum: [
          { required: true, message: "联系方式不能为空", trigger: "blur" },
        ],
        checkpass: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    goback() {
      this.$router.push("/mainpage");
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(this.registerForm);
        if (valid) {
          let url= '';
          url = '/register/?'+'&username='+this.registerForm.username+'&UNickName='+this.registerForm.UNickName+'&password='+this.registerForm.password+'&UAddress='+this.registerForm.UAddress+'&UPhoneNum='+this.registerForm.UPhoneNum+'&userFace='+this.registerForm.userFace;
          //this.postRequest("/register/", this.registerForm).then((resp) => {
          this.postRequest(url).then((resp) => {
            if (resp) {
              //更新密码成功后退出登录流程
              this.$router.replace("/userlogin");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>


<style lang="scss" scoped>
// .head {
//   display: flex;
//   align-items: center;
//   justify-content: flex-start;
//   padding: 50px 100px;
//   box-sizing: border-box;
// }
.register-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
  font-size: 30px;
}
.formbox {
  width:500px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
</style>
